<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息 - 用户端</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
            font-family: 'Roboto', sans-serif;
            min-height: 100vh;
            margin: 0;
        }
        .layout {
            display: flex;
            min-height: 100vh;
        }
        .sidebar {
            width: 210px;
            background: #fff;
            box-shadow: 2px 0 16px rgba(0,0,0,0.07);
            display: flex;
            flex-direction: column;
            padding: 32px 0 0 0;
        }
        .sidebar-title {
            font-size: 1.3rem;
            font-weight: 700;
            color: #2d3a4b;
            text-align: center;
            margin-bottom: 36px;
        }
        .nav {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .nav a {
            display: block;
            padding: 12px 32px;
            color: #4a5a6a;
            text-decoration: none;
            font-size: 1.08rem;
            border-left: 4px solid transparent;
            transition: background 0.2s, color 0.2s, border-color 0.2s;
        }
        .nav a.active, .nav a:hover {
            background: #eaf3ff;
            color: #3478f6;
            border-left: 4px solid #7eb6ff;
        }
        .logout-btn {
            margin: 32px 24px 0 24px;
            padding: 12px 0;
            width: calc(100% - 48px);
            background: linear-gradient(90deg, #ff6b6b 0%, #ffb36b 100%);
            color: #fff;
            font-weight: 700;
            border: none;
            border-radius: 8px;
            font-size: 1.08rem;
            cursor: pointer;
            transition: background 0.2s;
        }
        .logout-btn:hover {
            background: linear-gradient(90deg, #ffb36b 0%, #ff6b6b 100%);
        }
        .content {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            min-height: 100vh;
            padding-top: 48px;
        }
        .container {
            background: #fff;
            padding: 40px 36px 36px 36px;
            border-radius: 18px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.13);
            width: 420px;
            max-width: 98vw;
        }
        .title {
            font-size: 1.7rem;
            font-weight: 700;
            color: #2d3a4b;
            margin-bottom: 18px;
            text-align: center;
        }
        .avatar-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 18px;
        }
        .avatar-preview {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            background: #f5f8fa;
            margin-bottom: 10px;
            box-shadow: 0 2px 12px rgba(120,160,255,0.18);
            border: 3px solid #eaf3ff;
            transition: box-shadow 0.2s;
        }
        .avatar-preview:hover {
            box-shadow: 0 4px 24px rgba(80,120,255,0.22);
        }
        .profile-form {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 18px;
        }
        .form-row {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .profile-form label {
            width: 80px;
            font-weight: 500;
            color: #4a5a6a;
            text-align: right;
        }
        .profile-form input {
            flex: 1;
            padding: 10px 12px;
            border: 1px solid #d1d9e6;
            border-radius: 8px;
            font-size: 1rem;
            outline: none;
            transition: border 0.2s;
            background: #f8fbff;
        }
        .profile-form input:focus {
            border-color: #7eb6ff;
            background: #fff;
        }
        .save-btn {
            background: linear-gradient(90deg, #7eb6ff 0%, #5eaefd 100%);
            color: #fff;
            font-weight: 700;
            border: none;
            border-radius: 8px;
            padding: 14px;
            font-size: 1.1rem;
            cursor: pointer;
            margin-top: 10px;
            transition: background 0.2s, box-shadow 0.2s;
            box-shadow: 0 2px 8px rgba(120,160,255,0.10);
        }
        .save-btn:hover {
            background: linear-gradient(90deg, #5eaefd 0%, #7eb6ff 100%);
            box-shadow: 0 4px 16px rgba(80,120,255,0.18);
        }
        .save-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            box-shadow: none;
        }
        .loading {
            text-align: center;
            color: #666;
            font-style: italic;
        }
        .error {
            color: #ff6b6b;
            text-align: center;
            margin: 10px 0;
        }
        .success {
            color: #28a745;
            text-align: center;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="layout">
        <aside class="sidebar">
            <div class="sidebar-title">用户中心</div>
            <nav class="nav">
                <a href="user_books.html">浏览书籍</a>
                <a href="user_orders.html">我的订单</a>
                <a href="user_profile.html" class="active">个人信息</a>
            </nav>
            <button id="logoutBtn" class="logout-btn">退出登录</button>
        </aside>
        <main class="content">
            <div class="container">
                <div class="title">个人信息</div>
                <div class="avatar-section">
                    <img src="" alt="头像" class="avatar-preview" id="avatarPreview">
                </div>
                <div id="loadingMessage" class="loading">正在加载个人信息...</div>
                <div id="errorMessage" class="error" style="display: none;"></div>
                <div id="successMessage" class="success" style="display: none;"></div>
                <form class="profile-form" id="profileForm" style="display: none;">
                    <div class="form-row">
                        <label for="username">用户名</label>
                        <input type="text" id="username" name="username" disabled>
                    </div>
                    <div class="form-row">
                        <label for="nickname">昵称</label>
                        <input type="text" id="nickname" name="nickname">
                    </div>
                    <div class="form-row">
                        <label for="phone">手机号</label>
                        <input type="text" id="phone" name="phone">
                    </div>
                    <div class="form-row">
                        <label for="email">邮箱</label>
                        <input type="email" id="email" name="email">
                    </div>
                    <button type="submit" class="save-btn" id="saveBtn">保存</button>
                </form>
            </div>
        </main>
    </div>
    <script>
        (function() {
            var userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
            var userId = userInfo.userId;
            if (!userId) {
                alert('未检测到用户身份，请重新登录');
                window.location.href = 'login.html';
                return;
            }
            var apiBaseUrl = window.API_BASE_URL || 'http://localhost:3010';
            function loadProfile() {
                fetch(`${apiBaseUrl}/userAccount/${userId}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.success && data.code === 200) {
                            document.getElementById('loadingMessage').style.display = 'none';
                            document.getElementById('profileForm').style.display = 'flex';
                            const d = data.data;
                            document.getElementById('avatarPreview').src = 'https://ts2.tc.mm.bing.net/th/id/OIP-C.RRvjvSbeO6S_oh8T8tgfCAAAAA?pid=ImgDet&w=400&h=400&rs=1&o=7&rm=3';
                            document.getElementById('username').value = d.username || '';
                            document.getElementById('nickname').value = d.nickname || '';
                            document.getElementById('phone').value = d.phone || '';
                            document.getElementById('email').value = d.email || '';
                        } else {
                            showError('加载个人信息失败: ' + (data.message || '未知错误'));
                        }
                    })
                    .catch(error => {
                        showError('网络错误，请检查网络连接');
                    });
            }
            function showError(message) {
                document.getElementById('loadingMessage').style.display = 'none';
                document.getElementById('errorMessage').textContent = message;
                document.getElementById('errorMessage').style.display = 'block';
            }
            function showSuccess(message) {
                document.getElementById('successMessage').textContent = message;
                document.getElementById('successMessage').style.display = 'block';
                setTimeout(() => {
                    document.getElementById('successMessage').style.display = 'none';
                }, 3000);
            }
            function hideMessages() {
                document.getElementById('errorMessage').style.display = 'none';
                document.getElementById('successMessage').style.display = 'none';
            }
            document.getElementById('profileForm').addEventListener('submit', function(e) {
                e.preventDefault();
                hideMessages();
                const saveBtn = document.getElementById('saveBtn');
                saveBtn.disabled = true;
                saveBtn.textContent = '保存中...';
                const formData = {
                    id: userId,
                    nickname: document.getElementById('nickname').value,
                    phone: document.getElementById('phone').value,
                    email: document.getElementById('email').value
                };
                fetch(`${apiBaseUrl}/userAccount`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(formData)
                })
                .then(response => response.json())
                .then(data => {
                    saveBtn.disabled = false;
                    saveBtn.textContent = '保存';
                    if (data.success) {
                        showSuccess('个人信息保存成功！');
                    } else {
                        showError('保存失败: ' + (data.message || '未知错误'));
                    }
                })
                .catch(error => {
                    saveBtn.disabled = false;
                    saveBtn.textContent = '保存';
                    showError('网络错误，请检查网络连接');
                });
            });
            document.getElementById('logoutBtn').onclick = function() {
                localStorage.removeItem('userInfo');
                window.location.href = 'login.html';
            };
            loadProfile();
        })();
    </script>
</body>
</html> 